<template>
	<view class="seat">
		<uni-section title="游戏信息" type="line" class="seat-section">
			<uni-card :title="seatTitle" :sub-title="seatTip" :extra="seatStatus"
				thumbnail="/static/uni-center/grey.png">
				<uni-grid :column="6" :highlight="true" :showBorder="false" @change="choiceSeat" >
					<uni-grid-item class="seat-grid" v-for="(item,index) in seatList" :index="index" :key="index">
						<view class="grid-item-box" style="background-color: transparent;">
							<image :src="item.seatAvatar" class="seat-image" :class="[seatList[index].seatStatusCls,seatList[index].seatRoleStatus]"
								mode="aspectFill" />
							<text class="seat-num" :class="seatList[index].seatStatusCls">{{ item.seatNum }}</text>
							<view class="tag-view">
								<!-- 主持人展示所有角色信息 玩家仅展示自己信息 -->
								<uni-tag :class="item.seatRoleStatus" :inverted="true" :text="item.seatAvatarRole"
									:type="seatList[index].seatRoleType" />
							</view> 
						</view>
					</uni-grid-item>
				</uni-grid>
				<!-- 				<view class="status-tips">
					玩家状态标记
					<uni-tag :inverted="true" text="死亡" class="ghost" :type="primary" />
					<uni-tag :inverted="true" text="票出" :type="primary" />
				</view> -->
			</uni-card>
			<!-- 选座提示信息弹窗 -->
			<view class="confirm">
				<uni-popup ref="message" type="message">
					<uni-popup-message :type="popup.msgType" :message="popup.messageText" :duration="2000">
					</uni-popup-message>
				</uni-popup>
			</view>
		</uni-section>
	</view>
</template>

<script>
	import {entergame,submitgamerole,quitgame} from "@/common/api"
	import {mapState,mapMutations,mapGetters,mapActions} from "@/store/helper/dm"
	export default {
		options: { styleIsolation: 'shared' },
		props: {
			seatTitle: {
				type: String,
				defalut: "游戏选座",
			},
			seatTip: {
				type: String,
				defalut: "请点击座位进行操作",
			},
			seatStatus:{
				type: String,
				defalut: "",
			},
			seatList:{
				type: Array,
				required: true,
			}
		},
		data() {
			return {
				seatStatusIndex: 0,
				//测试数据
				// seatList: [{
				// 		seatNum: 1,
				// 		seatStatusCls: "selected-order",
				// 		seatAvatar: "http://thirdwx.qlogo.cn/mmopen/GdupicUuC3t3HPaDZia0W1nwXWwEBEjjPFeazSpRjWGJSSYHhqVaT5rA8OayWVRgicRMWo2xZudhedQ0oTIIBlFbNTzdE1HwbSO/132",
				// 		seatAvatarRole: "平民",
				// 		seatRoleType: "primary",
				// 		seatRoleStatus: "out",
				// 	},
				// 	{
				// 		seatNum: 2,
				// 		seatStatusCls: "selected-order",
				// 		seatAvatar: "http://thirdwx.qlogo.cn/mmopen/PiajxSqBRaEJW5icDAXUywUCP44gDgrRTzicvyeCibaQZnb6NfnuYGMtdJM1ZiasNic0UQlTibtrx38XjpvyrRPYsnzrw/132",
				// 		seatAvatarRole: "预言家",
				// 		seatRoleType: "success",
				// 		seatRoleStatus: "ghost",
				// 	},
				// 	{
				// 		seatNum: 3,
				// 		seatStatusCls: "selected-order",
				// 		seatAvatar: "http://thirdwx.qlogo.cn/mmopen/PiajxSqBRaEIoiaibCImug7rlANFZ7gFZxTbTMLbQADYSa6EvD6Odf2WZQpwxelQSbZc1WYqjnBOhjmzAxDDaEEcQ/132",
				// 		seatAvatarRole: "平民",
				// 		seatRoleType: "primary",
				// 		seatRoleStatus: "alive",
				// 	},
				// 	{
				// 		seatNum: 4,
				// 		seatStatusCls: "selected-order",
				// 		seatAvatar: "http://thirdwx.qlogo.cn/mmopen/DmTSLTdleeuIgcbXNyxugyokonKYQgOCJkgd13RGbPrulv2QtPF6qKR1yrZp8Lz6bzHCrzS9SyKlXl7O7RJLcw/132",
				// 		seatAvatarRole: "平民",
				// 		seatRoleType: "primary",
				// 		seatRoleStatus: "alive",
				// 	}, {
				// 		seatNum: 5,
				// 		seatStatusCls: "selected-mine",
				// 		seatAvatar: "https://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",
				// 		seatAvatarRole: "狼人",
				// 		seatRoleType: "error",
				// 		seatRoleStatus: "alive",
				// 	},
				// 	{
				// 		seatNum: 6,
				// 		seatStatusCls: "selected-order",
				// 		seatAvatar: "http://thirdwx.qlogo.cn/mmopen/RBE0eSQrAKMWV4nbjWHNMJLticuOUN2GjqMdDjowAHesVfMnI6QPjz0MKibglAM3XKNvCFNjBiaGibfibaIWBelTfYLFJbUKKL0Va/132",
				// 		seatAvatarRole: "狼人",
				// 		seatRoleType: "error",
				// 		seatRoleStatus: "alive",
				// 	}, {
				// 		seatNum: 7,
				// 		seatStatusCls: "selected-order",
				// 		seatAvatar: "http://thirdwx.qlogo.cn/mmopen/ajNVdqHZLLCrDXPfeLhoKp58O4iaIfLa6U3JDzV3Zm08X1lhd3z2NsJ5Uge9weEicyJ3tk3Dv22TcAIKibMbDmvMA/132",
				// 		seatAvatarRole: "狼人",
				// 		seatRoleType: "error",
				// 		seatRoleStatus: "alive",
				// 	}, {
				// 		seatNum: 8,
				// 		seatStatusCls: "selected-order",
				// 		seatAvatar: "http://thirdwx.qlogo.cn/mmopen/Q3auHgzwzM7kT0nC3icyQzibmpNEIQcU8IjWdv9d2AznHTSArcvrAMI1LwiaMm0ewGr6iaBHuVSAcDBQwQn63sHsbA/132",
				// 		seatAvatarRole: "女巫",
				// 		seatRoleType: "success",
				// 		seatRoleStatus: "alive",
				// 	}, {
				// 		seatNum: 9,
				// 		seatStatusCls: "selected-order",
				// 		seatAvatar: "/static/uni-center/grey.png",
				// 		seatAvatarRole: "狼美人",
				// 		seatRoleType: "warning",
				// 		seatRoleStatus: "alive",

				// 	}, {
				// 		seatNum: 10,
				// 		seatStatusCls: "selected-order",
				// 		seatAvatar: "http://thirdwx.qlogo.cn/mmopen/ajNVdqHZLLDsUXicFC09NN3FQRmzX7w05KhUGrLTsMEXljSZmNsqd1VF1jmcBicdKicRkwHuLmxF3EkQslRQWiaFxw/132",
				// 		seatAvatarRole: "平民",
				// 		seatRoleType: "primary",
				// 		seatRoleStatus: "alive",
				// 	}, {
				// 		seatNum: 11,
				// 		seatStatusCls: "selected-order",
				// 		seatAvatar: "http://thirdwx.qlogo.cn/mmopen/RBE0eSQrAKMWV4nbjWHNMPryg2eMgR5aJoHszYhBriajIUpW59CSBsuIgibEAZTVLnz0iafVNY68jOtJrX1oLxWfBfAZG5pXqez/132",
				// 		seatAvatarRole: "狼人",
				// 		seatRoleType: "error",
				// 		seatRoleStatus: "alive",
				// 	}, {
				// 		seatNum: 12,
				// 		seatStatusCls: "selected-order",
				// 		seatAvatar: "/static/uni-center/grey.png",
				// 		seatAvatarRole: "平民",
				// 		seatRoleType: "error",
				// 		seatRoleStatus: "alive",
				// 	}
				// ],
				popup: {
					msgType: '',
					messageText: '',
				},
				seatNum: 1
			}
		},
		computed: {
			...mapState([
				"user",
				"gameStatus",
				"currentGameID",
				"currentGamePlayerSeatNum"
			])
		},
		methods: {
			messageToggle(type, text) {
				this.popup.msgType = type
				this.popup.messageText = text
				this.$refs.message.open()
			},
			choiceSeat(e) {
				console.log(e)
				let {index} = e.detail
				let num = index + 1
				this.setCurrentChoiceSeatNum(num)
				//判断当前用户身份
				//判断条件嵌套 待优化写法
				if (this.user.type === 'dm' || this.gameStatus!='init') {
					return
				} else if (this.user.type === 'player') {
					//判断点击座位是否存在
					if (this.seatList[index].seatRoleStatus.length > 0) {
						//判断点击座位是否为本人座位
						if (num === this.currentGamePlayerSeatNum) {
							this.messageToggle('info', '正在处理离开当前座位操作，请稍后')
							setTimeout(this.exitSeat(),1000)							
						} else if(num != this.currentGamePlayerSeatNum){
							this.messageToggle('info', '正在切换其他座位，请稍后')
							if(this.currentGamePlayerSeatNum >0){this.exitSeat()}
							this.selectSeat(num)
						}
					} else if (this.seatList[index].seatRoleStatus.length === 0) {
						//座位不存在 则选择就座
						this.messageToggle('info', '正在选座，请稍后')
						if(this.currentGamePlayerSeatNum >0){this.exitSeat()}
						this.selectSeat(num)
					} else {
						this.messageToggle('error', '未知错误，请联系主持人排查')
					}
				} else {
					this.messageToggle('error', '未知错误，请联系主持人排查')
				}
			},
			async selectSeat(seatnum) {
				const {code,data,message} = await entergame({
					"gameCode": this.currentGameID,
					"seatNumber":seatnum,
					"userId": this.user.id
				})
				console.log(code)
				switch (code){				
					case "200":
					this.seatStatusIndex = 1
					this.messageToggle('success','选座成功')
					this.setUserSeatNum(seatnum)
					break;
					
					case "700":
					this.seatStatusIndex = 2
					this.messageToggle('error', message)
					break;
					
					case "401":
					this.seatStatusIndex = 0
					this.messageToggle('error', '您当前未登录，请登录后再加入游戏')
					break;
					
					case "403" || "404":
					this.seatStatusIndex = 0
					this.messageToggle('error', '当前网络存在问题，请重试')
					break;				
				}
			},
			async exitSeat(){
				const {code,data,message} = await quitgame({
					"gameCode": this.currentGameID,
					"userId": this.user.id
				})
				switch (code){
					case "200":
					// 当前座位号重置为0
					this.setUserSeatNum(0)
					this.messageToggle('success', '已成功离开座位')
					break;
					
					case "700":
					this.messageToggle('error', message)
					break;
					
					case "401":
					this.messageToggle('error', '您当前未登录，请登录后再加入游戏')
					break;
					
					case "403" || "404":
					this.messageToggle('error', '当前网络存在问题，请重试')
					break;			
				}
			},
			...mapMutations(["setUserSeatNum", "setCurrentChoiceSeatNum"])
		},
	}
</script>

<style lang="scss" scoped>
	.seat-section {
		height: 724.63rpx;
	}

	//样式可能有冲突
	.uni-card {
		height: 580rpx !important;
	}

	/deep/ .uni-grid {
		height: 362.31rpx;
	}
	/deep/.grid-item-box{
		height: 181.15rpx;		
	}
	
	/deep/ .uni-tag{
		font-size: 8px;
		padding: 4px 6px;
	}


	.seat-grid {
		margin: 5px 0;
		height: 172.1rpx !important;
	}

	.seat-image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		border: 5px solid transparent;

		&.selected-order {
			border: 4px solid rgba(118, 154, 255,0.3);
		}

		&.selected-mine {
			border: 4px solid #007aff;
		}

		&:hover {
			border: 4px solid #007aff;
		}
		&.ghost,&.out{
			-webkit-filter: grayscale(1)!important;
			/* Webkit */
			filter: gray!important ;
			/* IE6-9 */
			filter: grayscale(1) !important;
			/* W3C */
		}

	}

	.seat-num {
		font-weight: 700;
		padding-top: 3px;

		&.selected-mine {
			font-weight: 700;
			color: #007aff;
		}

		&.selected-order {
			font-weight: 700;
			color: #3F536E;
		}
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 5px 0;

	}

	.grid-item-box-row {
		flex: 1;
		//position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	// .uni-grid-item .seat-grid {
	// 	height: 144.92rpx;
	// }

	.uni-grid-item--border-top,
	.uni-grid-item--border {
		border: 0;
	}

	.uni-tag {
		font-weight: 700;
	}

	.status-tips {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-top: 18.11rpx;

		/deep/.uni-tag {
			margin-left: 18.11rpx;

			.ghost {
				color: #000000 !important;
				border-color: #000000 !important;
			}
		}
	}

	.tag-view {

		/deep/ &.ghost {
			color: #8f939c;
		}

		/deep/ &.out {
			color: #8f939c;
		}
	}
</style>
